import { Layout } from 'antd';
import { useTranslation } from 'react-i18next';
import logo from '../../assets/logo.png';
import styled from './index.module.less';
const { Sider } = Layout;
const HelloTemplate = function () {
  const { t } = useTranslation();
  return (
    <Layout className={styled['layout']}>
      <Sider className={styled['layout-sider']} theme={'light'}>
        <img src={logo} alt="logo" />
      </Sider>
      <div className={styled['layout-right']}>
        <p>{t('micro.title')}</p>
        <p>
          {t('micro.see')}
          <a href="https://saturn.tuyacn.com" target="_blank">
            {t('micro.saturn')}
          </a>
          {t('micro.more')}
        </p>
      </div>
      <div className={styled['layout-left']}>
        <div>{t('section.title')}</div>
        <div className={styled['layout-left-child']}>
          <p> 1. {t('section.sectionOne')}</p>
          <p> 2. {t('section.sectionTwo')}</p>
          <p> 3. {t('section.sectionThree')}</p>
          <p> 4. {t('section.sectionfour')}</p>
        </div>
      </div>
    </Layout>
  );
};
export default HelloTemplate;
